<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页面</title>
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/util.js"></script>
    <script>
        window.onload=function (){
            init();
        }
        async function init(){
            let info = await ajaxGet("/user/getLoginUser");
            if (info  != null && info != ''){
                $("infoDiv").innerHTML=`欢迎光临,${info.name}<a href="/html/custom/shop.html">查看购物车</a>`;
            }else {
                $("infoDiv").innerHTML=`你好，请先：<a href="/html/login.html">登录</a>`;
            }
            findProduct(1);
        }

        async function findProduct(pageNo){
            let info =await ajaxGet("/product/findByItem",{
                pageNo,
                name:$("name").value,
                startDate:$("startDate").value,
                endDate:$("endDate").value
            });
            let str ="";
            for (let i = 0; i < info.list.length; i++) {
                let obj =info.list[i];
                str += `<div style="text-align: center;width: 400px;">
                        <img src="/html/img/${obj.imgPath}" width="200" height="260px"><br>
                        ${obj.name}<br>
                        单价：${obj.price}<br>
                        已售出：${obj.soldNum}
                        <a href="javascript:buy(${obj.id})">购买</a>
</div>`
            }
            $("productDiv").innerHTML=str;
            //显示页码
            let cutStr="";
            for (let i = 1; i <=info.pages; i++) {
                cutStr += `<a style="margin-left: 10px" href="javascript:findProduct(${i})">${i}</a>`;
            }
            $("cutDiv").innerHTML=cutStr;
        }

        async function buy(id){
            let info =await  ajaxGet("/shop/buy",{
                productId:id
            })
            if (info == "ok"){
                location.href="/html/custom/shop.html";
            }
        }
    </script>
</head>
<body>
    <div id="infoDiv"></div>

    <div>
        商品名：<input type="text" id="name">
        生产起始日期：<input type="text" id="startDate">
        生产结束日期：<input type="text" id="endDate">
        <input type="button" value="查询" onclick="findProduct(1)">
    </div>
    <div id="productDiv" style="display: flex; height: 500px;"></div>
    <div id="cutDiv"></div>
</body>
</html>